<template>
  <div class="tools-content">
    <router-link v-for="(item,index) in data" :to="{path:item.url}" :key="item.id" class="tool-item" v-html="item.template">
    </router-link>
    <el-popover
        placement="right"
        trigger="hover">
        <img src="@/assets/images/home/index/eqCode.jpg" alt="" width="200px">
      <div slot='reference' class="tool-item">小程</br>序码</div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "Tools",
  props:{
    data:Array
  }
}
</script>

<style scoped lang="scss">
  .tools-content{
    width: 85px;
    display: flex;
    flex-direction: column;
    position: fixed;
    right:15px;
    top: 55%;
    .tool-item{
      margin-bottom: 15px;
      background: #fff;
      border-radius: 5px;
      height: 85px;
      width: 85px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      span{
        margin: 2px 0;
      }
    }
    .tool-item:last-child{
      margin-bottom: 0;
    }
  }
</style>
